<template>
	<uni-popup ref="success" type="center" :isTopOffset="isTopOffset" :hideBar="hideBar" :showClose="showClose" v-show="visible" @change="visibleChange">
		<view class="success-popup" :class="{noMore:!showMore}">
			<view class="popup-title">
				<text class="iconfont icon-correct"></text>{{title}}
			</view>
			<view class="popup-get">
				你获得<icon-heart /><text class="get-value">{{getNum}}</text> 当前余额<icon-heart /><text class="red">{{coinNum}}</text>
			</view>
			<view class="more-box" v-if="showMore">
				<exchange-list :title="midTitle" imgSize="150" :list="exchangeList"></exchange-list>
				<view class="go-btn" @click="goNew" v-if="!hideBtn">去发起心愿</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { mapGetters } from 'vuex'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import exchangeList from '@/components/pay-popup/exchange-list.vue'
	export default {
		name:'pay-popup',
		components:{
			uniPopup,
			exchangeList
		},
		props:{
			groupId:'',
			getNum:'',
			visible:{
				type: Boolean,
				default:false
			},
			showMore:{
				type: Boolean,
				default:false
			},
			showClose:{
				type: Boolean,
				default:true
			},
			hideBar:{
				type: Boolean,
				default:false
			},
			hideBtn:{
				type: Boolean,
				default:false
			},
			isTopOffset:{
				type: Boolean,
				default:true
			},
			title:{
				type: String,
				default:'支持成功'
			},
			info:''
		},
		data() {
			return {
				exchangeList:[],
				midTitle:''
			}
		},
		computed:{
			...mapGetters([
				'coinNum'
			])
		},
		watch:{
			'visible':function(val){
				if(val){
					if(this.showMore&&(this.groupId||this.info)){
						this.getSuccessInfo().then(res=>{
							this.$refs['success'].open()
						}).catch(()=>{
							this.$emit('update:visible', false)
						})
					}else{
						this.$refs['success'].open()
					}
				} else {
					this.$refs['success'].close()
				}
			}
		},
		methods:{
			cancel(formname){
				this.$emit('update:visible', false)
				this.$refs['success'].close()
			},
			visibleChange({show}){
				this.$emit('update:visible', show)
			},
			async getSuccessInfo(){
				if(this.info){
					this.midTitle=this.info.wish_coin_effect
					this.exchangeList=this.info.goods_list
					this.getNum=this.info.register_give_wish_num
				}else{
					let data = await this.$api.getSupportSuccessInfo({group_id:this.groupId})
					let info=data.support_wish_reward_info
					this.midTitle=data.wish_coin_effect
					this.exchangeList=info.goods_list
				}
			},
			goNew(){
				this.$emit('update:visible', false)
				uni.switchTab({
					url:'/pages/exchange/exchange'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.success-popup{
	position: relative;
	padding:50rpx;
	width: 580rpx;
	border-radius: 10rpx;
	background-color: #fff;
	// &.noMore{
	// 	width: 400rpx;
	// }
	.popup-title{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom:30rpx;
		font-size:36rpx;
		font-weight: 600;
		color:#E7404A;
		.iconfont{
			font-weight: normal;
			font-size: 45rpx;
			margin-right: 10rpx;
		}
	}
	.popup-get{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		.iconfont{
			font-size: 28rpx;
			margin:0 5rpx;
		}
	}
	.get-value{
		color: #E7404A;
		&:not(:last-child){
			margin-right: 20rpx;
		}
	}
	.paypopup-title-light{
		color:#E7404A;
	}
	.more-box{
		margin-top: 40rpx;
	}
	.go-btn{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #E7404A;
		font-size:36rpx;
		color:#fff;
		border-radius: 10rpx;
	}
}
</style>
